<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/favicon.ico">
    <title>评估问卷</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/page-health-riskQuestion.css"/>
    <link rel="stylesheet" href="../plugins/elementui/index.css"/>
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/main.js"></script>
    <script type="text/javascript" src="../plugins/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="../plugins/healthmobile.js"></script>
    <script type="text/javascript" src="../plugins/vue/vue.js"></script>
    <script type="text/javascript" src="../plugins/vue/axios-0.18.0.js"></script>
    <script type="text/javascript" src="../plugins/elementui/index.js"></script>
</head>

<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div id="app">
    <!-- 页面头部 -->
    <div class="top-header">
        <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
        <span class="center">关爱健康</span>
        <span class="f-right"><i class="icon-more"></i></span>

    </div>
    <!-- 页面内容 -->
    <div class="contentBox">
        <div class="question" v-show="dataIndex === index" v-for="(item, index) in tableData" :key="index">
            <div class="q-tit">
                <p class="type-num">
                    <span>
                        <i class="cur-num">{{item.id}}</i>/
                        <i class="total-num">{{tableData.length}}</i>
                    [<i class="type">单选</i>]
                    </span>
                </p>
                <p class="tit">{{index+1}}.{{item.description}}</p>
                <p class="tit">{{item.name}}</p>
            </div>
            <div class="q-choose">
                <div class="choose-items">
                    <ul class="clearfix">
                        <li v-for="(li, liIndex) in item.option" :key="liIndex"
                            @click="choiceRadio(index,liIndex)">
                            <input class="magic-radio" type="radio" :value="li" v-model="checkedValue[index]"
                                   @change="get_radio_value(index)"/>
                            <label>{{li}}分</label>
                        </li>
                    </ul>


                </div>
                <div class="tool-btn">
                    <a v-show="isPrev" class="btn next-btn" @click="prev">上一题</a>
                    <a v-show="isNext" class="btn next-btn" @click="next">下一题</a>
                    <a v-show="isSubmit" class="btn next-btn" @click="save">提交</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data: {
            tableData: [],//新增和编辑表单中对应的检查项列表数据
            dataIndex: 0, //问题索引
            isPrev: false, //上一题是否显示
            isNext: false, //下一题是否显示
            isSubmit: false, //提交是否显示
            all_list: [],
            checkedValue: [], // 绑定单选框的值
            //答案-分数
            answer: [1, 2, 3, 4, 5],
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
           /* var value = getCooikePhone();
            if (value === "-1") {
                //this.$message.error("出现获取手机号错误，请重新登录！");
                setTimeout( function(){
                    location.href="/pages/login.html";
                }, 2 * 1000 );
                return false;
            } else {*/
                axios.post("/health/findAllCmedicine.do").then((res) => {
                    if (res.data.flag) {
                        //弹出成功提示信息
                        // this.tableData = res.data.data;
                        for (var newStrId of JSON.parse(JSON.stringify(res.data.data))) {
                            newStrId['option'] = this.answer;
                            newStrId['isSelect'] = false;
                            this.tableData.push(newStrId);
                        }
                        // console.log(this.tableData);
                    } else {
                        //执行失败
                        this.$message.error(res.data.message);
                    }
                });
           // }
        },
        methods: {
            choiceRadio(index, liIndex) { //单选操作
                this.choice(index, liIndex, null);
            },
            choice(index, liIndex, liChildIndex) {
                setTimeout(() => {
                    if (this.checkedValue.length > 0 && this.checkedValue[index]) {
                        this.isNext = true;
                        this.tableData[index].isSelect = true;
                    } else {
                        this.isNext = false;
                        this.tableData[index].isSelect = false;
                    }
                    if (this.dataIndex === (this.tableData.length - 1)) { //判断是否是最后一题，并隐藏下一题按钮
                        this.isNext = false;
                    }
                    //    console.log(this.data[index].checkbox)
                })

            },
            prev() { //上一题
                this.dataIndex -= 1;
                if (this.dataIndex <= 0) {
                    this.isPrev = false;
                }
                this.isNext = true;
                this.isSubmit = false;
            },
            next() { //下一题
                this.dataIndex += 1;
                if (this.dataIndex > 0) {
                    this.isPrev = true;
                    if (this.tableData[this.dataIndex].isSelect) {
                        this.isNext = true;
                    } else {
                        this.isNext = false;
                    }
                }
                if (this.tableData.length - 1 == this.dataIndex) {
                    this.isNext = false;
                    this.isSubmit = true;
                }
            },
            save() { //保存数据---这是完成按钮
                if (this.tableData[this.dataIndex].isSelect) {
                    var value = getCooikePhone();
                    if (value === "-1") {
                    //this.$message.error("出现获取手机号错误，请重新登录！");
                        setTimeout( function(){
                            location.href="/pages/login.html";
                        }, 2 * 1000 );
                        return false;
                    } else {
                        // console.log(this.all_list); //this.data---需要保存到数据库的数据
                        axios.post("/health/addCmedicineMemberByPhone.do?phone=" + value + "&answerList=" + this.all_list).then((res) => {
                            if (res.data.flag) {
                                this.$message.success(res.data.message);
                                location.href = "/pages/index.html";
                            } else {
                                this.$message.error(res.data.message);
                            }
                        });
                    }

                } else {
                    alert(this.tableData[this.dataIndex].name + '未填写');
                }
            },
            get_radio_value: function (index) {
                // 获取当前radio当前值
                this.all_list[index] = this.checkedValue[index];
            },
        }
    })
</script>
</html>